<template>
	<view class="zone">
		
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <image src="http://img.cpgm.cc/panda/static/invite/honor.png" mode="widthFix" /> 
					</view>
				</view>
			</view>
		</u-navbar>

		<image class="cup" src="http://img.cpgm.cc/panda/static/invite/cup.png" mode="widthFix" />

		<view class="main">
			<p class="pt">看看其他玩家在游戏中都获得了哪些好东西</p>

			<view class="box">
				<scroll-view scroll-y class="scbox">
					<view class="lsit">
						<view class="item" v-for="(item,index) in list" :key="index">
							<p class="title">{{item.title}}</p>
							<p class="p2">{{item.desc}}</p>
							<view class="imgbox">
								<view v-if="item.thumb != ''" @click="seeimg(headerimgurl +  item.thumb)">
									<image :src="headerimgurl +  item.thumb" mode="widthFix" />
								</view>
								<view v-if="item.thumb1 != ''" @click="seeimg(headerimgurl +  item.thumb1)">
									<image :src="headerimgurl +  item.thumb1" mode="widthFix" />
								</view>
								<view v-if="item.thumb2 != ''" @click="seeimg(headerimgurl +  item.thumb2)">
									<image :src="headerimgurl +  item.thumb2" mode="widthFix" />
								</view>
							</view>
							<p class="p2">点击图片可查看大图</p>
						</view>
					</view>

					<view v-if="list.length==0" class="zanwu">
						<image src="http://img.cpgm.cc/panda/static/duoBao/baiwu.png" class="zaneu_img" mode="widthFix">
						</image>
						<view class="">
							没有数据哦~
						</view>
					</view>
				</scroll-view>
			</view>
		</view>


	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#000',
				},
				list:'',
				headerimgurl: config.headerimgurl,
			};
		},
		onLoad(){
			this.getNewsList();
		},
		methods: {
			async getNewsList(){
				let res = await this.$http.index.getNewsList({
					type:2
				})
				this.list = res.data
			},

			seeimg(img){
				uni.previewImage({
					urls: [img],
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
		},
	}
</script>

<style lang="less">

.zone {
	background: #000;
	min-height: 100vh;
}

.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		width: 100%;
		display: flex;
		align-items: flex-end;
		text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
			margin-bottom: 10px;
		}
		image {
				width: 35%;
				margin-left: 5px;
			}
	}

	.main {
		padding: 20px 10px 10px;
	}

	.cup {
		width: 100px;
		position: fixed;
		z-index: 999;
		top: 10px;
		right: 10px;
	}
	.box {
		margin-top: 10px;
	}

	.pt {
		color: #FFFFFF;
	}

	.item {
		background: rgba(255,255,255,0.95);
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
		border-radius: 8px;
		padding: 15px 10px;
		margin-bottom: 10px;
	}

	.title {
		color: #000;
		font-size: 16px;
		font-weight: 600;
	}

	.scbox {
		height: calc(100vh - 120px);
	}

	.p2 {
		color: #000;
		font-size: 14px;
		margin-top: 10px;
	}

	.imgbox {
		display: flex;
		align-items: center;
		margin-top: 10px;
		view {
			width: 31%;
			margin: 0 1%;

			image {
				width: 100%;
			}
		}
	}


	.zanwu {
		font-size: 14px;
		color: #A1A1A1;
		font-weight: 500;
		margin-top: 50%;
		text-align: center;

		.zaneu_img {
			width: 70%;

		}
	}

</style>
